/**
 *  @view
 *  @互联家商户销售明细页面 
 */

import React, { Component } from 'react';
import { Dimensions, StyleSheet, ScrollView, View, Text, Image, Picker, TouchableHighlight } from 'react-native';

const { width, height } = Dimensions.get('window');

/**
 *  @style
 *  @页面主要样式表导入
 */
import salesDetailStyle from '../styles/salesDetail';

export default class SalesAmountScreen extends Component {

  static navigationOptions = {
    headerTitle: '销售明细',
    headerRight: <View />,
  };

  constructor(props) {
    super(props);
    this.state = {
      count: 2,
      timeName: '最近一周',
      payName: '预定',
    };
  };

  render() {

    return (
      <ScrollView style={styles.scrollBox}>

        <View style={styles.container}>

          <View style={styles.switchBarBox}>
            <View style={styles.switchBarItem}>
              <View style={styles.switchBarItemTitle}>
                <Picker
                  selectedValue={this.state.timeName}
                  style={{ height: 30, width: (width - 150) / 2 }}
                  onValueChange={(itemValue, itemIndex) => this.setState({ timeName: itemValue })}>
                  <Picker.Item label="最近一周" value="java" />
                  <Picker.Item label="最近一月" value="js" />
                  <Picker.Item label="最近三月" value="java" />
                  <Picker.Item label="最近半年" value="js" />
                </Picker>
              </View>
            </View>
            <View style={styles.switchBarItem}>
              <View style={styles.switchBarItemTitle}>
                <Picker
                  selectedValue={this.state.payName}
                  style={{ height: 30, width: (width - 150) / 2 }}
                  onValueChange={(itemValue, itemIndex) => this.setState({ payName: itemValue })}>
                  <Picker.Item label="预定" value="java" />
                  <Picker.Item label="退房" value="js" />
                </Picker>
              </View>
            </View>
          </View>

          <View style={styles.salesItemBox}>
            <View>
              <Text style={styles.salesItemTitle}>[ 预定 ] 豪华大水床</Text>
              <Text style={styles.salesItemTime}>2018-4-10 11:280:34</Text>
            </View>
            <Text style={styles.salesItemAddFee}>+300</Text>
          </View>

          <View style={styles.salesItemBox}>
            <View>
              <Text style={styles.salesItemTitle}>[ 退房 ] 豪华大水床</Text>
              <Text style={styles.salesItemTime}>2018-4-10 11:280:34</Text>
            </View>
            <Text style={styles.salesItemReFee}>-300</Text>
          </View>

          <View style={styles.salesItemBox}>
            <View>
              <Text style={styles.salesItemTitle}>[ 预定 ] 豪华大水床</Text>
              <Text style={styles.salesItemTime}>2018-4-10 11:280:34</Text>
            </View>
            <Text style={styles.salesItemAddFee}>+300</Text>
          </View>

          <View style={styles.salesItemBox}>
            <View>
              <Text style={styles.salesItemTitle}>[ 预定 ] 豪华大水床</Text>
              <Text style={styles.salesItemTime}>2018-4-10 11:280:34</Text>
            </View>
            <Text style={styles.salesItemAddFee}>+300</Text>
          </View>

        </View>

      </ScrollView>
    );
  };

};

const styles = StyleSheet.create(salesDetailStyle);